<template>
  <div class="author-page">
    <!-- 作者基本信息 -->
    <div class="author-header">
      <div class="container">
        <div class="author-info-wrapper">
          <div class="author-avatar">
            <div class="avatar-placeholder"></div>
          </div>
          <div class="author-info">
            <h1 class="author-name">{{ author.name }}</h1>
            <div class="author-status">
              <el-tag size="small" v-if="author.isSignedAuthor" type="success">签约作家</el-tag>
              <el-tag size="small" v-else>普通作家</el-tag>
            </div>
            <div class="author-stats">
              <div class="stat-item">
                <div class="stat-value">{{ author.bookCount }}</div>
                <div class="stat-label">作品</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ author.totalWordCount }}</div>
                <div class="stat-label">总字数</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ author.followersCount }}</div>
                <div class="stat-label">粉丝</div>
              </div>
            </div>
            <div class="author-desc">{{ author.introduction || '暂无简介' }}</div>
            <div class="author-actions">
              <el-button type="primary" @click="followAuthor" v-if="!isFollowing">
                <i class="el-icon-plus"></i> 关注作者
              </el-button>
              <el-button plain @click="unfollowAuthor" v-else>
                <i class="el-icon-check"></i> 已关注
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 作者作品列表 -->
    <div class="author-content container">
      <div class="author-books-section">
        <div class="section-header">
          <h2 class="section-title">全部作品</h2>
          <div class="section-filter">
            <el-radio-group v-model="bookFilter" size="small">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="serializing">连载中</el-radio-button>
              <el-radio-button label="completed">已完结</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        
        <div class="book-list" v-if="filteredBooks.length > 0">
          <div class="book-item" v-for="(book, index) in filteredBooks" :key="index">
            <div class="book-cover">
              <div class="book-cover-placeholder"></div>
            </div>
            <div class="book-info">
              <router-link :to="`/page/${book.id}`" class="book-title">{{ book.title }}</router-link>
              <div class="book-meta">
                <span class="category">{{ book.category }}</span>
                <span class="separator">|</span>
                <span class="status" :class="{ 'completed': book.status === '已完结' }">{{ book.status }}</span>
                <span class="separator">|</span>
                <span class="word-count">{{ book.wordCount }}字</span>
              </div>
              <div class="book-desc">{{ book.desc }}</div>
              <div class="book-stats">
                <span class="stat-item"><i class="el-icon-view"></i> {{ book.views }}</span>
                <span class="stat-item"><i class="el-icon-star-off"></i> {{ book.favorites }}</span>
                <span class="stat-item"><i class="el-icon-chat-dot-round"></i> {{ book.comments }}</span>
              </div>
              <div class="book-update">
                <span class="update-label">最新章节：</span>
                <router-link :to="`/reader/${book.id}?chapter=${book.latestChapter.id}`" class="chapter-link">
                  {{ book.latestChapter.title }}
                </router-link>
                <span class="update-time">{{ book.updateTime }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="empty-books" v-else>
          <i class="el-icon-document"></i>
          <p>暂无相关作品</p>
        </div>
      </div>
      
      <!-- 作者动态 -->
      <div class="author-activities-section mt-5">
        <div class="section-header">
          <h2 class="section-title">作者动态</h2>
        </div>
        
        <div class="activity-list" v-if="author.activities.length > 0">
          <div class="activity-item" v-for="(activity, index) in author.activities" :key="index">
            <div class="activity-time">{{ activity.time }}</div>
            <div class="activity-content">
              <div class="activity-type">{{ activity.type }}</div>
              <div class="activity-desc">{{ activity.content }}</div>
            </div>
          </div>
        </div>
        
        <div class="empty-activities" v-else>
          <i class="el-icon-bell"></i>
          <p>暂无动态</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AuthorPage',
  data() {
    return {
      authorId: null,
      author: {
        id: null,
        name: '加载中...',
        isSignedAuthor: false,
        bookCount: '0',
        totalWordCount: '0',
        followersCount: '0',
        introduction: '',
        activities: []
      },
      books: [],
      bookFilter: 'all',
      isFollowing: false
    }
  },
  computed: {
    filteredBooks() {
      if (this.bookFilter === 'all') {
        return this.books;
      } else if (this.bookFilter === 'serializing') {
        return this.books.filter(book => book.status === '连载中');
      } else {
        return this.books.filter(book => book.status === '已完结');
      }
    }
  },
  created() {
    this.authorId = this.$route.params.id;
    this.fetchAuthorInfo(this.authorId);
    this.fetchAuthorBooks(this.authorId);
  },
  methods: {
    fetchAuthorInfo(authorId) {
      // 模拟API调用获取作者信息
      setTimeout(() => {
        // 实际应用中这里会使用 authorId 调用后端 API
        this.author = {
          id: authorId,
          name: '我吃西红柿',
          isSignedAuthor: true,
          bookCount: '25',
          totalWordCount: '3050万',
          followersCount: '156.2万',
          introduction: '我吃西红柿，中国网络文学作家，本名李锐，浙江省嘉兴市人。曾创作《盘龙》《吞噬星空》《九鼎记》《星辰变》《寒武再临》《莽荒纪》《雪鹰领主》等作品。作品风格宏大恢宏，情节跌宕起伏，立意新颖奇特。',
          activities: [
            {
              time: '2023-03-01',
              type: '更新章节',
              content: '《沧元图》更新了第1258章 最终之战'
            },
            {
              time: '2023-02-28',
              type: '更新章节',
              content: '《沧元图》更新了第1257章 神秘空间'
            },
            {
              time: '2023-02-25',
              type: '作者动态',
              content: '各位书友们，新书正在构思中，预计下个月与大家见面，敬请期待！'
            }
          ]
        };
      }, 500);
    },
    fetchAuthorBooks(authorId) {
      // 模拟API调用获取作者作品
      setTimeout(() => {
        // 实际应用中这里会使用 authorId 调用后端 API
        this.books = [
          {
            id: authorId + '_1',
            title: '沧元图',
            category: '东方玄幻',
            status: '连载中',
            wordCount: '300万',
            desc: '一个修真文明开辟了通往其他宇宙的通道，这可能是一场灾难，也可能蕴藏着无限的机遇...',
            views: '1250万',
            favorites: '35万',
            comments: '125万',
            updateTime: '2小时前',
            latestChapter: {
              id: 1258,
              title: '第1258章 最终之战'
            }
          },
          {
            id: authorId + '_2',
            title: '吞噬星空',
            category: '科幻',
            status: '已完结',
            wordCount: '505万',
            desc: '在人类文明发展到一定阶段后，有个神秘的邀请，邀请全人类参加一个试炼，而这个试炼是陨墨星河公认的试炼之一...',
            views: '2350万',
            favorites: '82万',
            comments: '265万',
            updateTime: '2年前',
            latestChapter: {
              id: 1584,
              title: '完本感言'
            }
          },
          {
            id: authorId + '_3',
            title: '盘龙',
            category: '奇幻',
            status: '已完结',
            wordCount: '450万',
            desc: '一个人能够可以改变历史，能够将命运的丝线切断，再重新编织...魔兽,精灵,龙,人类...等等各个种族生存的大陆...',
            views: '1980万',
            favorites: '65万',
            comments: '186万',
            updateTime: '5年前',
            latestChapter: {
              id: 1450,
              title: '终章 未来'
            }
          }
        ];
      }, 600);
    },
    followAuthor() {
      this.isFollowing = true;
      this.$message({
        message: '已成功关注该作者！',
        type: 'success'
      });
    },
    unfollowAuthor() {
      this.isFollowing = false;
      this.$message({
        message: '已取消关注！',
        type: 'info'
      });
    }
  }
}
</script>

<style scoped>
.author-header {
  background-color: #f5f7fa;
  padding: 40px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.author-info-wrapper {
  display: flex;
  gap: 30px;
}

.author-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background-color: #e0e0e0;
}

.author-info {
  flex: 1;
}

.author-name {
  font-size: 28px;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.author-status {
  margin-bottom: 15px;
}

.author-stats {
  display: flex;
  margin-bottom: 20px;
}

.stat-item {
  margin-right: 30px;
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.author-desc {
  line-height: 1.8;
  color: #606266;
  margin-bottom: 20px;
  max-width: 800px;
}

.author-content {
  padding: 40px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
}

.book-list {
  margin-top: 20px;
}

.book-item {
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #ebeef5;
}

.book-cover {
  width: 120px;
  height: 160px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-right: 20px;
  flex-shrink: 0;
}

.book-cover-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
}

.book-info {
  flex: 1;
}

.book-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 10px;
}

.book-title:hover {
  color: #409EFF;
}

.book-meta {
  margin-bottom: 10px;
  color: #909399;
  font-size: 14px;
}

.separator {
  margin: 0 10px;
  color: #dcdfe6;
}

.status.completed {
  color: #909399;
}

.status {
  color: #67c23a;
}

.book-desc {
  margin-bottom: 15px;
  color: #606266;
  line-height: 1.6;
}

.book-stats {
  margin-bottom: 10px;
}

.book-stats .stat-item {
  margin-right: 20px;
  display: inline-block;
  color: #909399;
  font-size: 14px;
}

.book-stats .stat-item i {
  margin-right: 5px;
}

.book-update {
  color: #606266;
  font-size: 14px;
}

.update-label {
  color: #909399;
}

.chapter-link {
  color: #409EFF;
  text-decoration: none;
  margin-right: 10px;
}

.update-time {
  color: #909399;
}

.empty-books, .empty-activities {
  text-align: center;
  padding: 50px 0;
  color: #909399;
}

.empty-books i, .empty-activities i {
  font-size: 48px;
  margin-bottom: 20px;
}

.activity-list {
  margin-top: 20px;
}

.activity-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}

.activity-time {
  width: 100px;
  color: #909399;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-type {
  font-weight: 500;
  margin-bottom: 5px;
}

.activity-desc {
  color: #606266;
}

.mt-5 {
  margin-top: 2rem;
}
</style> 